<template>
	<div class="noticeList">
		<div class='my-header'></div>
		<div class="listmain">
			<PullRefreshList 
                v-model:refreshing="refreshing" 
                v-model:loading="loading"
                v-model:finished="finished" 
                v-model:list="list" 
                @load="onLoad"
            >
				<van-cell 
                    v-for="(item, index) in list" 
                    :key="index" 
                    :title="item.type" 
                    center 
                    @click="routerPush(item)" 
                >
					<template #label>
                        <template v-if="item.type == '预约扫墓'">
							<div>日期：{{ item.gsy_dat1 }}</div>
							<div>预约人：{{ item.gsy_ex1 }}</div>
							<div>使用人：{{ item.gsy_ex2 }}</div>
							<div>联系电话：{{ item.gsy_ex3 }}</div>
							<div>人数：{{ item.gsy_ex4 }}</div>
						</template>
						<template v-else-if="item.type == '预约看墓'">
							<div>日期：{{ item.gy_dat1 }}</div>
							<div>预约人：{{ item.gy_ex1 }}</div>
							<div>联系电话：{{ item.gy_ex3 }}</div>
							<div>人数：{{ item.gy_ex4 }}</div>
						</template>
						<template v-else-if="item.type == '预约安葬'">
							<div>到达日期：{{ item.gaz_dat1 }}</div>
							<div>落葬日期：{{ item.gaz_dat2 }}</div>
							<div>联系人：{{ item.gaz_ex2 }}</div>
							<div>使用人：{{ item.gaz_ex3 }}</div>
							<div>联系电话：{{ item.gaz_ex4 }}</div>
							<div>墓区位置：{{ item.gaz_ex1 }}</div>
						</template>
                    </template>
                    <!-- <template #value>
                        <van-button 
                            type="primary" 
                            size="mini"
                            @click.stop="cancel(item)"
                        >
                            取消预约
                        </van-button>
                    </template> -->
                </van-cell>
			</PullRefreshList>
		</div>
	</div>
</template>

<script lang="ts" setup>
	import { markRaw, reactive, ref, toRaw, onMounted, onBeforeMount } from 'vue'
    import type { Ref } from 'vue'
    import { useRouter, useRoute } from 'vue-router'
    import { showDialog, showConfirmDialog, showLoadingToast, closeToast } from 'vant'
	import PullRefreshList from '@/components/PullRefreshList.vue'
    import { GmwdyyApi, getCancellationRecordApi } from '@/apis'

    const router = useRouter()
    const route = useRoute()

	import { useStore } from '@/store'
    const store = useStore()

	const list: Ref<Array<any>> = ref([])
	const loading: Ref<boolean> = ref(false)
	const finished: Ref<boolean> = ref(false)
	const refreshing: Ref<boolean> = ref(true)
	const onLoad = async(callback) => {
		if (store.openid) {
			let val = await GmwdyyApi({
				token: store.openid
			})
			list.value.push(...val)
		}
		callback(true)
	}
	const routerPush = (val) => {
		// 后面看是跳转还是什么
	}
    const cancel = (val) => {
        showConfirmDialog({
            title: '提示',
            message: '确定取消预约？'
        }).then(() => {
            showLoadingToast({
                message: '加载中...',
                forbidClick: true,
                duration: 0
            });
            getCancellationRecordApi({
                sh_id: val.id
            }).then(async res => {
                closeToast();
                list.value = []
                loading.value = true
                finished.value = false
                let val = await GmwdyyApi({
                    token: store.openid
                })
		        list.value.push(...val)
                loading.value = false
                finished.value = true
            }).catch(err => {
                closeToast();
            })
        }).catch(err => {

        })
        
        console.log(val)
    }
</script>

<style lang="scss" scoped>
	.noticeList {
		width: 100%;
		height: 100vh;
		overflow: hidden;
		display: flex;
		flex-direction: column;
	}

	.my-header {
		display: flex;
		justify-content: center;
		background: url(@/assets/policy/policybg.png) no-repeat;
		background-size: 100% 90%;
		margin-bottom: 10px;
		border-radius: 10px;
	}

	.my-header::after {
		content: '';
		width: 95%;
		height: 185px;
		margin-top: 20px;
		background: url(@/assets/banner/gmjs_bg.png);
		background-size: 100% 100%;
		border-radius: 5px;
	}

	.my-main {
		display: flex;
		flex-direction: column;
		align-items: center;
		/* justify-content: center; */
	}

	.maindiv {
		width: 90%;
		/* border: 1px solid #2C3E50; */
		box-shadow: 0px 0px 5px 5px #e3eee9;
		border-radius: 10px;
		overflow: hidden;
		margin-bottom: 25px;
	}

	.maindivfont1 {
		color: #333333;
		font-size: 12pt;
		font-weight: bold;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		margin-top: 10px;
		margin-bottom: 10px;
	}

	.maindivfont2 {
		color: #666666;
		font-size: 10pt;
		word-break: break-all;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		margin-bottom: 30px;
	}

	.listmain {
		flex: 1;
		overflow: auto;
	}
</style>